<template>
    <div id="box">
        <el-form label-width="120px">
            <el-form-item label="姓名">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="form.age" type="number"/>
            </el-form-item>
            <el-form-item label="班级">
                <el-input v-model="form.classId"/>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="form.phonenumber"/>
            </el-form-item>
            <el-form-item label="性别">
                <el-input v-model="form.gender"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" style="position: absolute; left:100px;">添加</el-button>
            </el-form-item>
        </el-form>
        <h3 id="successInformation" style="color:#409EFF;display: none;">注册成功</h3>
    </div>
</template>

<script>
import axios from "axios";
export default {
    data() {
        return {
            form: {
                name: "",
                age:"",
                classId:"",
                phonenumber:"",
                gender:""
            }
        }
    },
    methods: {
        onSubmit() {
            const formData = JSON.stringify(this.form)
            axios.post("/api/student/addAStudent", formData, {
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                .then(res => {
                    console.log("提交成功", res.data);
                })
                .catch(error => {
                    console.error("发送失败", error);
                })
        }
    }

}
</script>

<style scoped>

#box {
    width: 30%;
    height: 350px;
    background-color: white;
    border-radius: 15px;
}

</style>